<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 伪类是 : 冒号 */
      /* 伪元素是::两个冒号， first-letter。 第一个字母 */
      div::first-letter {
        color: red;
        font-size: 30px;
      }

      /* 选中的是div第一行 */
      div::first-line {
        color: rgb(180, 168, 97);
      }

      /* 选中的是 被选择的文字 */
      div::selection {
        background-color: yellow;
        color: green;
      }

      input::placeholder {
        color: skyblue;
      }

      /* p元素内容之前，也就是199之前，伪类元素是选不中的(选不了价格) */
      p::before {
        content: "价格：";
        color: red;
      }

      /* p元素内容之前，也就是199之后，创建一个子元素 */
      p::after {
        content: "00";
        color: black;
        font-size: 12px;
      }

      /* 伪元素都是选中，元素中的一些特殊位置!!!!!!,before和after必须写content */
    </style>
  </head>
  <body>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci,
      pariatur recusandae quas est explicabo corporis minus hic, dignissimos
      exercitationem illo architecto cumque temporibus facere? Quae ex atque
      debitis voluptatum reiciendis!
    </div>
    <input type="text" placeholder="请输入您的用户名" />

    <p>&yen;199.</p>
    <p>&yen;299.</p>
    <p>&yen;399.</p>
    <p>&yen;1499.</p>
  </body>
</html>
